<template>
	<view class="vehicle-list-container">
		<!-- 搜索栏 -->
		<view style="display: flex;flex-direction: row;gap: 20rpx;margin:  20rpx;">
			<view style="flex: 1;display: flex;align-items: center;
			background-color: #ffffff;border: 1px solid #d1d5db;border-radius: 15rpx;">
				<text class="iconfont icon-sousuokuang"
					style="font-size: 20px;font-weight: 600;color: #9CA3AF;margin: 0 10rpx;"></text>
				<input style="color: #9CA3AF;" placeholder="搜索车架号、标题" v-model="searchKeyword" @input="onSearchInput" />
			</view>
			<view class="filter-btn" @click="showFilter">
				<text class="iconfont icon-shaixuanguolv" style="font-size: 26px;font-weight: 600;"></text>
			</view>
		</view>
		<!-- 状态筛选 -->
		<view class="filter-section">
			<scroll-view style="width: 100%;" scroll-x="true">
				<view style="display: flex;padding: 0 10rpx;">
					<view class="filter-tab" :class="{ active: activeFilter === item.value }"
						v-for="item in filterOptions" :key="item.value" @click="selectFilter(item.value)">
						<text>{{ item.label }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 车辆列表 -->
		<view class="vehicle-list">
			<view class="vehicle-card" v-for="(vehicle, index) in vehicles" :key="vehicle.id"
				@click="navigateToDetail(vehicle.id)">
				<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 24rpx;">
					<image style="width: 150rpx;height: 150rpx;border-radius: 16rpx;" :src="vehicle.image"
						mode="aspectFill"></image>
					<view
						style="height: 140rpx; flex: 1;margin: 0 20rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<text style="font-size: 16px;font-weight: 600;color: #1f2937;">{{ vehicle.name }}</text>
						<text style="font-size: 14px;color: #6b7280;">{{ vehicle.plateNumber }}</text>
					</view>
					<view style="flex-shrink: 0;">
						<text style="padding: 8rpx 16rpx;border-radius: 24rpx;font-size: 12px;"
							:class="vehicle.statusClass">{{ vehicle.status }}</text>
					</view>
				</view>

				<view class="vehicle-stats">
					<view class="stat-item">
						<text class="stat-label">{{ vehicle.statLabel2 }}</text>
						<text class="stat-value" style="color: #E83A3A;">{{ vehicle.statValue2 }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">{{ vehicle.statLabel2 }}</text>
						<text class="stat-value">{{ vehicle.statValue2 }}</text>
					</view>
				</view>

				<view class="vehicle-footer">
					<text class="update-time">更新时间：{{ vehicle.updateTime }}</text>
					<view class="action-buttons">
						<button class="action-btn detail-btn">查看详情</button>
						<button class="action-btn primary-btn" @click.stop="">{{ vehicle.actionText }}</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 悬浮添加按钮 -->
		<view class="fab-button" @click="addVehicle">
			<text class="iconfont icon-plus" style="font-size: 20px;"></text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	// import {
	// 	permissionManager,
	// 	ROLES
	// } from '../../utils/permission.js'

	// 响应式数据
	const searchKeyword = ref('')
	const activeFilter = ref('all')

	const filterOptions = ref([{
			label: '全部',
			value: 'all'
		},
		{
			label: '采购中',
			value: 'purchasing'
		},
		{
			label: '检测中',
			value: 'inspecting'
		},
		{
			label: '过户中',
			value: 'transferring'
		},
		{
			label: '待出口',
			value: 'exporting'
		},
		{
			label: '运输中',
			value: 'shipping'
		}
	])

	const vehicles = ref([{
			id: 1,
			name: 'BMW X5 2020款20款BMW X5 2020款',
			plateNumber: 'LCFK545454SFF948SS',
			status: '采购中',
			statusClass: 'status-purchasing',
			image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=60&h=60&fit=crop&crop=center',
			statLabel1: '检测等级',
			statValue1: 'S级',
			statLabel2: '采购价格',
			statValue2: '¥45.8万',
			updateTime: '2小时前',
			actionText: '更新状态'
		},
		{
			id: 2,
			name: 'Audi A6L 2021款',
			plateNumber: '沪B67890',
			status: '检测中',
			statusClass: 'status-inspecting',
			image: 'https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=60&h=60&fit=crop&crop=center',
			statLabel1: '检测进度',
			statValue1: '80%',
			statLabel2: '预计完成',
			statValue2: '今天',
			updateTime: '30分钟前',
			actionText: '催促检测'
		},
		{
			id: 3,
			name: 'Mercedes C200 2019款',
			plateNumber: '粤C54321',
			status: '过户中',
			statusClass: 'status-transferring',
			image: 'https://images.unsplash.com/photo-1618843479313-40f8afb4b4d8?w=60&h=60&fit=crop&crop=center',
			statLabel1: '过户进度',
			statValue1: '60%',
			statLabel2: '缺失资料',
			statValue2: '2项',
			updateTime: '1小时前',
			actionText: '补充资料'
		},
		{
			id: 4,
			name: 'Volkswagen Passat 2020款',
			plateNumber: '苏D98765',
			status: '待出口',
			statusClass: 'status-exporting',
			image: 'https://images.unsplash.com/photo-1582639510494-c80b5de9f148?w=60&h=60&fit=crop&crop=center',
			statLabel1: '分配码头',
			statValue1: '上海港',
			statLabel2: '预计装船',
			statValue2: '明天',
			updateTime: '3小时前',
			actionText: '分配物流'
		},
		{
			id: 5,
			name: 'Toyota Camry 2021款',
			plateNumber: '津E13579',
			status: '运输中',
			statusClass: 'status-shipping',
			image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?w=60&h=60&fit=crop&crop=center',
			statLabel1: '物流公司',
			statValue1: '中远海运',
			statLabel2: '预计到达',
			statValue2: '2天后',
			updateTime: '5小时前',
			actionText: '跟踪物流'
		}
	])

	// 计算属性
	// const filteredVehicles = computed(() => {
	// 	let filtered = vehicles.value

	// 	// 按状态筛选
	// 	if (activeFilter.value !== 'all') {
	// 		filtered = filtered.filter(vehicle => {
	// 			const statusMap = {
	// 				purchasing: '采购中',
	// 				inspecting: '检测中',
	// 				transferring: '过户中',
	// 				exporting: '待出口',
	// 				shipping: '运输中'
	// 			}
	// 			return vehicle.status === statusMap[activeFilter.value]
	// 		})
	// 	}

	// 	// 按关键词搜索
	// 	if (searchKeyword.value) {
	// 		filtered = filtered.filter(vehicle =>
	// 			vehicle.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
	// 			vehicle.plateNumber.toLowerCase().includes(searchKeyword.value.toLowerCase())
	// 		)
	// 	}

	// 	// 按角色权限过滤数据
	// 	filtered = permissionManager.filterData(filtered, 'status')

	// 	return filtered
	// })

	// 方法
	const onSearchInput = (e) => {
		searchKeyword.value = e.detail.value
	}

	const selectFilter = (filter) => {
		activeFilter.value = filter
	}

	const showFilter = () => {
		uni.showToast({
			title: '筛选功能开发中',
			icon: 'none'
		})
	}

	const navigateToDetail = (id) => {
		uni.navigateTo({
			url: `/pages/vehicle-detail/vehicle-detail?id=${id}`
		})
	}

	const viewDetail = (id) => {
		navigateToDetail(id)
	}

	const updateStatus = (id) => {
		uni.showToast({
			title: '状态更新功能开发中',
			icon: 'none'
		})
	}

	// 权限检查方法
	const canViewDetail = computed(() => {
		// return permissionManager.canPerformOperation('view')
	})

	// const canUpdateStatus = (status) => {
	// return permissionManager.canEditStatus(status)
	// })

	const canAddVehicle = computed(() => {
		// return permissionManager.canPerformOperation('create')
	})

	const addVehicle = () => {
		
		uni.navigateTo({
			url: '/pages/addition/addition'
		})
		// if (!canAddVehicle.value) {
		// 	uni.showToast({
		// 		title: '没有新增车辆权限',
		// 		icon: 'none'
		// 	})
		// 	return
		// }

		// uni.showToast({
		// 	title: '新增车辆功能开发中',
		// 	icon: 'none'
		// })
	}

	// 生命周期
	onMounted(() => {
		loadVehicles()
	})

	const loadVehicles = () => {
		// 这里可以调用API获取车辆列表
		console.log('加载车辆列表')
	}
</script>

<style scoped>
	.vehicle-list-container {
		background-color: #f8fafc;
		min-height: 100vh;
	}

	.search-section {
		background: white;
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.search-bar {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.search-input-wrapper {
		flex: 1;
		position: relative;
	}

	.search-icon {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		color: #9ca3af;
		font-size: 16px;
	}

	.search-input {
		width: 100%;
		padding: 12px 12px 12px 40px;
		border: 1px solid #d1d5db;
		border-radius: 8px;
		font-size: 14px;
	}

	.filter-btn {
		width: 40px;
		height: 40px;
		background: #dbeafe;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #3b82f6;
	}

	.filter-section {
		background: white;
		padding: 16px;
		white-space: nowrap;
		border-bottom: 1px solid #e5e7eb;
		border-top: 1px solid #e5e7eb;
	}

	.filter-tab {
		flex-shrink: 0;
		/* 防止选项被压缩，确保能横向滚动 */
		padding: 8px 15px;
		/* 上下左右内边距 */
		margin-right: 15px;
		/* 选项之间的间距 */
		border-radius: 20px;
		/* 圆角效果 */
		background-color: #f0f0f0;
		/* 未选中时的背景色 */
		color: #333;
		/* 未选中时的字体颜色 */
		font-size: 14px;
		transition: all 0.3s ease;
		/* 添加过渡效果 */
		cursor: pointer;
	}

	/* 选中时的样式 */
	.filter-tab.active {
		background-color: #007aff;
		/* 蓝色背景 */
		color: #fff;
		/* 白色字体 */
	}


	.vehicle-list {
		padding: 16rpx;
	}

	.vehicle-card {
		background: white;
		border-radius: 12px;
		padding: 16rpx;
		margin-bottom: 16px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.status-purchasing {
		background: #dbeafe;
		color: #3b82f6;
	}

	.status-inspecting {
		background: #fef3c7;
		color: #f59e0b;
	}

	.status-transferring {
		background: #dcfce7;
		color: #10b981;
	}

	.status-exporting {
		background: #f3e8ff;
		color: #8b5cf6;
	}

	.status-shipping {
		background: #fed7aa;
		color: #f97316;
	}

	.vehicle-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin-bottom: 12px;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
	}

	.stat-label {
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 4px;
	}

	.stat-value {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
	}

	.vehicle-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.update-time {
		font-size: 12px;
		color: #6b7280;
	}

	.action-buttons {
		display: flex;
		gap: 8px;
	}

	.action-btn {
		line-height: normal;
		padding: 18rpx 24rpx;
		border-radius: 6px;
		font-size: 12px;
		border: none;
	}

	.action-btn::after {
		border: none;
	}

	.detail-btn {
		background: #f3f4f6;
		color: #6b7280;
	}

	.primary-btn {
		background: #3b82f6;
		color: white;
	}

	.fab-button {
		position: fixed;
		bottom: 80px;
		right: 16px;
		width: 56px;
		height: 56px;
		background: #3b82f6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24px;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
	}
</style>